<template>
  <div id="app">
    姓名: <input type="text" v-model.trim="name" /><br />
    年龄: <input type="number" v-model.number="age" /><br />
    身高: <input type="text" v-model.number="height" />(米)<br />
    体重: <input type="text" v-model.number="weight" />(公斤)<br />
    病史: <input type="text" v-model.trim="medical" /><br />
    <button @click="btn">诊断</button>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      name: "",
      age: "",
      height: "",
      weight: "",
      medical: "",
      msg: "",
    };
  },
  methods: {
    btn() {
      if (
        !this.name ||
        !this.age ||
        !this.height ||
        !this.weight ||
        !this.medical
      ) {
        alert("不能为空");
      }
      const bml = this.weight / (this.height / 100) ** 2;
      let num = "";
      if (bml <= 18.5) {
        num = "体重过轻";
      } else if (bml <= 24.9) {
        num = "正常";
      } else if (bml <= 29.9) {
        num = "体重过重";
      } else {
        num = "肥胖";
      }
      this.msg = "患者" + this.name + "的诊断结果:" + num
    },
  },
};
</script>

<style>
#app {
  margin: 20px;
}
input {
  margin: 20px;
}
</style>
